/*
* @moudule:@/views/budget/examine/examineList
* @author:zm
* @date:2020-11-17
* 审核列表
*/

<template>
  <div class="productView_container">
    <header>
      <p>审核列表</p>
    </header>
    <main>
      <el-form :inline="true" ref="form" :model="formInline" class="main_searchBar">
        <el-form-item>
          <el-upload
            ref="upload"
            name="uploadFile"
            action="/api/RevenueRecoveryController/restoreImport"
            :limit="1"
            :data="params"
            :on-success="importTarget"
            :headers="{'token':token}"
            :on-progress="progress"
            :on-error="errorUpload"
            :show-file-list="false"
          >
            <el-button size="small" type="orange">导入</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="danger" @click="handle_export()">模板下载</el-button>
        </el-form-item>
        <el-form-item class="fr" v-show="status=='N'">
          <el-button size="small" plain @click="status = 'Y'">返回</el-button>
        </el-form-item>
        <!-- <el-form-item class="fr" v-show="status=='Y' && jurisdiction">
          <el-badge :value="tableDataN_length" class="item">
            <el-button size="small" type="primary" @click="handle_search_N(true)">未审核</el-button>
          </el-badge>
        </el-form-item>-->
      </el-form>
      <div class="table">
        <el-tabs v-model="tabActive" size="mini" type="card" style="margin-top: 10px;">
          <el-tab-pane label="已审核" name="list1"></el-tab-pane>
          <el-tab-pane label="上传历史" name="list2"></el-tab-pane>
          <el-tab-pane name="list3" v-if="jurisdiction">
            <template slot="label">
              <el-badge :value="tableDataN_length" class="item">
                <span>待审核</span>
              </el-badge>
            </template>
          </el-tab-pane>
        </el-tabs>
        <div v-show="tabActive=='list1'">
          <el-table
            id="table1"
            :max-height="height+'px'"
            size="mini"
            :header-cell-style="{background:'#eef1f6'}"
            :data="tableDataY"
            border
            style="width: 100%"
            v-loading="showTableLoading"
          >
            <el-table-column prop="logId" label="日志ID"></el-table-column>
            <el-table-column prop="fileName" label="文件名称"></el-table-column>
            <el-table-column label="上传日期">
              <template slot-scope="scope">
                <span v-text="renderTime(scope.row.importDate)"></span>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="上传人"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="handle_detail(scope.row.logId)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="tabActive=='list2'">
          <el-table
            id="table2"
            :max-height="height+'px'"
            size="mini"
            :header-cell-style="{background:'#eef1f6'}"
            :data="tableDataH"
            border
            style="width: 100%"
            v-loading="showTableLoading"
          >
            <el-table-column prop="logId" label="日志ID"></el-table-column>
            <el-table-column prop="fileName" label="文件名称"></el-table-column>
            <el-table-column label="上传日期">
              <template slot-scope="scope">
                <span v-text="renderTime(scope.row.importDate)"></span>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="上传人"></el-table-column>
            <el-table-column prop="area_NAME" label="上传人区域"></el-table-column>
            <el-table-column label="审核状态">
              <template slot-scope="scope">
                <span v-text="scope.row.status == 'N' ? '未审核' : '已审核'"></span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="handle_detail(scope.row.logId)" type="text" size="small">查看</el-button>
                <!-- <el-button @click="handle_examine(scope.row.logId,scope.$index)" type="text" size="small">审核</el-button> -->
                <el-button @click="handle_delete(scope.row.logId,scope.$index)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div v-show="status=='N'"> -->
        <div v-show="tabActive=='list3'">
          <el-table
            id="table3"
            :max-height="height+'px'"
            size="mini"
            :header-cell-style="{background:'#eef1f6'}"
            :data="tableDataN"
            border
            style="width: 100%"
            v-loading="showTableLoading"
          >
            <el-table-column prop="logId" label="日志ID"></el-table-column>
            <el-table-column prop="fileName" label="文件名称"></el-table-column>
            <el-table-column label="上传日期">
              <template slot-scope="scope">
                <span v-text="renderTime(scope.row.importDate)"></span>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="上传人"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="handle_detail(scope.row.logId)" type="text" size="small">查看</el-button>
                <el-button @click="handle_examine(scope.row.logId,scope.$index)" type="text" size="small">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { $budgetAPI, $budget } from '@/api';
import { setSessionStorage, getSessionStorage, removeSessionStorage } from '@/common/js/storage';
import { getCookie, setCookie } from '@/common/js/cookie';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
    data() {
        return {
            formInline: {
                status: 'Y'
            },
            jurisdiction: false,
            status: 'Y',
            token: getCookie('token'),
            tableDataY: [],
            tableDataN: [],
            tableDataH: [], // 上传历史
            tableDataN_length: 0,
            showTableLoading: false,
            tabActive: 'list1',
            height: ''
        };
    },
    mounted() {
        this.getHeight();
    },
    methods: {
        getHeight() {
            this.height = window.innerHeight - this.$refs.form.$el.offsetHeight - 83 - 54 - 51 - 40 - 10;
        },
        renderTime(date) {
            var dateee = new Date(date).toJSON();
            return new Date(+new Date(dateee) + 8 * 3600 * 1000)
                .toISOString()
                .replace(/T/g, ' ')
                .replace(/\.[\d]{3}Z/, '');
        },
        // 已审核列表
        handle_search_Y() {
            this.showTableLoading = true;
            $budgetAPI.getrestoreImportList(
                {
                    status: 'Y'
                },
                res => {
                    if (res.code == 0) {
                        this.tableDataY = res.content.content.data;
                    }
                    this.showTableLoading = false;
                },
                err => {
                    this.showTableLoading = false;
                }
            );
        },
        // 未审核列表
        handle_search_N() {
            this.showTableLoading = true;
            $budgetAPI.getrestoreImportList(
                {
                    status: 'N'
                },
                res => {
                    if (res.code == 0) {
                        if (res.content.mgs == '没有审核权限') {
                            this.jurisdiction = false;
                            return;
                        } else {
                            this.jurisdiction = true;
                            this.tableDataN = res.content.content.data;
                            this.tableDataN_length = res.content.content.data.length;
                        }
                    }
                    this.showTableLoading = false;
                },
                err => {
                    this.showTableLoading = false;
                }
            );
        },
        //导入成功的回调
        importTarget(response, file, fileList) {
            this.alertError(response);
            this.loading.close();
            if (response.code == 0) {
                this.$message({
                    type: 'success',
                    message: '导入成功'
                });
                this.tableDataN_length += 1;
                this.$refs.upload.clearFiles();
            }
        },
        progress(event, file, fileList) {
            this.loading = this.$loading({
                lock: true,
                text: '正在导入',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        },
        errorUpload(err, file, fileList) {
            this.loading.close();
            this.$refs.upload.clearFiles();
        },
        // 查看详情
        handle_detail(logid) {
            this.$router.push({
                path: '/budget/examineDetail',
                query: {
                    logid: logid
                }
            });
        },
        // 审核
        handle_examine(logid, index) {
            this.$confirm('是否确认审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.loading = this.$loading({
                        lock: true,
                        text: '提交中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    $budgetAPI.restoreImportSubmit(
                        {
                            logId: logid
                        },
                        res => {
                            this.loading.close();
                            if (res.code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '审核成功'
                                });
                                this.tableDataY.unshift(this.tableDataN[index]);
                                this.tableDataN.splice(index, 1);
                                this.tableDataN_length -= 1;
                            }
                        },
                        err => {
                            this.loading.close();
                            this.alertError('审核失败');
                        }
                    );
                })
                .catch(() => {});
        },
        // 上传历史
        getHistory() {
            this.showTableLoading = true;
            $budgetAPI.getHistory(
                {},
                res => {
                    if (res.code == 0) {
                        this.tableDataH = res.content.data;
                    }
                },
                err => {}
            );
        },
        // 删除历史
        handle_delete(logid, index) {
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.loading = this.$loading({
                        lock: true,
                        text: '删除中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    $budgetAPI.deleteFile(
                        {
                            logId: logid
                        },
                        res => {
                            this.loading.close();
                            if (res.code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                });
                                this.tableDataH.splice(index, 1);
                            }
                        },
                        err => {
                            this.loading.close();
                            this.alertError('删除失败');
                        }
                    );
                })
                .catch(() => {});
        },
        // 导出
        handle_export() {
            var xlsxParam = { raw: true }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
            let workbook = XLSX.utils.book_new();
            let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
            XLSX.utils.book_append_sheet(workbook, ws1, '已审核');
            let ws2 = XLSX.utils.table_to_sheet(document.querySelector('#table2'), xlsxParam);
            XLSX.utils.book_append_sheet(workbook, ws2, '上传历史');
            let ws3 = XLSX.utils.table_to_sheet(document.querySelector('#table3'), xlsxParam);
            XLSX.utils.book_append_sheet(workbook, ws3, '待审核');
            let wbout = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream;charset=utf-8"'
                    }),
                    '审核列表.xlsx'
                );
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbOut);
            }
            return wbout;
        }
    },
    computed: {
        params() {
            let obj = {};
            return obj;
        }
    },
    created() {
        this.handle_search_Y();
        this.handle_search_N();
        this.getHistory();
    }
};
</script>

<style lang="scss" scoped>
.productView_container {
    width: 100%;
    height: 100%;
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        padding: 0 10px 10px;
        /deep/ .el-badge__content.is-fixed {
            top: 7px;
        }
        .main_searchBar {
            // border-bottom: 1px solid #d6d9e5;
            /deep/ .el-form-item {
                margin: 6px 10px 6px 0;
            }
            .el-badge {
                line-height: 1;
            }
            #search_btn {
                background-color: #2a90de;
            }
            #export_btn {
                background-color: #2cd531;
            }
        }
        .main_navBar {
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .area {
                text-align: left;
                display: flex;
                .it {
                    cursor: pointer;
                    font-size: 14px;
                    display: inline-block;
                    .td {
                        font-weight: bold;
                    }
                    &:last-child {
                        span {
                            &:last-child {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
